import {
  Button,
  Input,
  Image,
  Card,
  Switch,
  Slider,
  Rate,
  Checkbox,
  CheckboxGroup,
  Select,
  InputNumber,
  HeadMenu,
  MenuItem,
  Tabs,
  TabPanel,
  Swiper, SwiperItem 
} from 'tdesign-vue-next'

/* 组件库：TDesign 版本 */
export const componentMap = {
  VText: {
    component: Input,
    defaultProps: { placeholder: '请输入内容', value: '' },
    defaultStyle: { width: 200, height: 40, fontSize: 14 },
    slots: {},
  },
  Button: {
    component: Button,
    defaultProps: { theme: 'primary', content: '按钮' },
    defaultStyle: { width: 120, height: 40 },
    slots: {},
  },
  Picture: {
    component: Image,
    defaultProps: {
      src: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
      fit: 'cover',
    },
    defaultStyle: { width: 375, height: 150 },
    slots: {},
  },
  Card: {
    component: Card,
    defaultProps: {},
    defaultStyle: { width: 300, height: 200 },
    slots: {},
  },
  Select: {
    component: Select,
    defaultProps: {
      value: '',
      options: [
        { label: '选项一', value: '1' },
        { label: '选项二', value: '2' },
      ],
      placeholder: '请选择',
    },
    defaultStyle: { width: 200, height: 40 },
    slots: {},
  },
  Switch: {
    component: Switch,
    defaultProps: {
      value: false,
    },
    defaultStyle: { width: 100, height: 30 },
    slots: {},
  },
  Slider: {
    component: Slider,
    defaultProps: {
      value: 50,
      min: 0,
      max: 100,
    },
    defaultStyle: { width: 300, height: 40 },
    slots: {},
  },
  Rate: {
    component: Rate,
    defaultProps: {
      value: 3,
      count: 5,
    },
    defaultStyle: { width: 200, height: 40 },
    slots: {},
  },
  CheckboxGroup: {
    component: CheckboxGroup,
    defaultProps: {
      value: [],
      options: [
        { label: '苹果', value: 'apple' },
        { label: '香蕉', value: 'banana' },
      ],
    },
    defaultStyle: { width: 200, height: 40 },
    slots: {},
  },
  Checkbox: {
    component: Checkbox,
    defaultProps: {
      label: '勾选项',
      value: 'checked',
    },
    defaultStyle: { width: 100, height: 40 },
    slots: {},
  },

  /** 新增导航菜单 */
  NavMenu: {
    component: HeadMenu,
    defaultProps: {
      value: 'home',
      options: [
        { label: '首页', value: 'home' },
        { label: '商品', value: 'products' },
        { label: '关于我们', value: 'about' },
      ],
    },
    defaultStyle: { width: 400, height: 60 },
    slots: {},
  },

  /** 新增 Tabs */
  Tabs: {
    component: Tabs,
    defaultProps: {
      value: 'tab1',
    },
    defaultStyle: { width: 400, height: 200 },
    slots: {
      default: [
        { component: TabPanel, props: { value: 'tab1', label: '标签一' } },
        { component: TabPanel, props: { value: 'tab2', label: '标签二' } },
        { component: TabPanel, props: { value: 'tab3', label: '标签三' } },
      ],
    },
  },
  
}
